<template>
  <div class="job-statistics-demo">
    <el-card>
      <template #header>
        <div class="demo-header">
          <h2>岗位统计页面演示</h2>
          <p>展示使用真实API数据的岗位统计功能</p>
        </div>
      </template>

      <div class="demo-content">
        <!-- 功能特性介绍 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="feature-card">
              <div class="feature-icon">
                <el-icon size="32" color="#409eff"><TrendCharts /></el-icon>
              </div>
              <h3>实时数据</h3>
              <p>使用真实API数据，支持自动刷新，数据实时更新</p>
              <ul>
                <li>基础统计接口</li>
                <li>详细统计接口</li>
                <li>自动刷新机制</li>
              </ul>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card class="feature-card">
              <div class="feature-icon">
                <el-icon size="32" color="#67c23a"><PieChart /></el-icon>
              </div>
              <h3>丰富图表</h3>
              <p>7种不同类型的图表，全面展示岗位统计数据</p>
              <ul>
                <li>岗位状态分布</li>
                <li>申请状态分布</li>
                <li>趋势分析图表</li>
                <li>热门岗位排行</li>
              </ul>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card class="feature-card">
              <div class="feature-icon">
                <el-icon size="32" color="#e6a23c"><DataAnalysis /></el-icon>
              </div>
              <h3>数据分析</h3>
              <p>深度数据分析，支持导出和详细查看</p>
              <ul>
                <li>成功率分析</li>
                <li>公司活跃度</li>
                <li>行业分布统计</li>
                <li>数据导出功能</li>
              </ul>
            </el-card>
          </el-col>
        </el-row>

        <!-- 数据示例 -->
        <el-divider content-position="left">
          <h3>数据结构示例</h3>
        </el-divider>

        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="基础统计API" name="basic">
            <div class="api-demo">
              <h4>接口地址: <code>GET /api/jobs/statistics/</code></h4>
              <el-alert
                title="此接口返回岗位、申请、公司的基础统计数据"
                type="info"
                :closable="false"
                style="margin-bottom: 16px;"
              />
              <pre class="json-preview">{{ basicApiExample }}</pre>
            </div>
          </el-tab-pane>

          <el-tab-pane label="详细统计API" name="detailed">
            <div class="api-demo">
              <h4>接口地址: <code>GET /api/jobs/statistics/detailed/</code></h4>
              <el-alert
                title="此接口返回详细的统计分析数据，包括趋势、分布等"
                type="info"
                :closable="false"
                style="margin-bottom: 16px;"
              />
              <pre class="json-preview">{{ detailedApiExample }}</pre>
            </div>
          </el-tab-pane>

          <el-tab-pane label="图表配置" name="charts">
            <div class="charts-demo">
              <h4>支持的图表类型</h4>
              <el-row :gutter="16">
                <el-col :span="6" v-for="chart in chartTypes" :key="chart.name">
                  <el-card class="chart-type-card">
                    <div class="chart-icon">
                      <el-icon size="24" :color="chart.color">
                        <component :is="chart.icon" />
                      </el-icon>
                    </div>
                    <h5>{{ chart.name }}</h5>
                    <p>{{ chart.description }}</p>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>

        <!-- 操作按钮 -->
        <el-divider />
        <div class="demo-actions">
          <el-button type="primary" size="large" @click="goToStatistics">
            <el-icon><View /></el-icon>
            查看岗位统计页面
          </el-button>
          <el-button type="success" size="large" @click="goToTest">
            <el-icon><Setting /></el-icon>
            API测试页面
          </el-button>
          <el-button size="large" @click="refreshDemo">
            <el-icon><Refresh /></el-icon>
            刷新演示
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  TrendCharts, PieChart, DataAnalysis, View, Setting, Refresh,
  BarChart, LineChart, Histogram, Grid
} from '@element-plus/icons-vue'

const router = useRouter()
const activeTab = ref('basic')

// 图表类型配置
const chartTypes = [
  {
    name: '饼图',
    icon: 'PieChart',
    color: '#409eff',
    description: '状态分布、类型分布'
  },
  {
    name: '柱状图',
    icon: 'BarChart',
    color: '#67c23a',
    description: '数量对比、排行榜'
  },
  {
    name: '折线图',
    icon: 'LineChart',
    color: '#e6a23c',
    description: '趋势分析、时间序列'
  },
  {
    name: '环形图',
    icon: 'Histogram',
    color: '#f56c6c',
    description: '分布统计、占比展示'
  }
]

// 基础API示例数据
const basicApiExample = `{
  "message": "统计数据获取成功",
  "data": {
    "jobs": {
      "total": 150,
      "published": 120,
      "draft": 20,
      "closed": 8,
      "expired": 2,
      "recent_30_days": 25
    },
    "applications": {
      "total": 500,
      "pending": 80,
      "approved": 300,
      "rejected": 120,
      "recent_30_days": 150,
      "success_rate": 60.0
    },
    "companies": {
      "total": 45,
      "active_companies": [...]
    },
    "job_types": [
      {"job_type": "full_time", "count": 100},
      {"job_type": "part_time", "count": 30}
    ],
    "popular_jobs": [...]
  }
}`

// 详细API示例数据
const detailedApiExample = `{
  "message": "详细统计数据获取成功",
  "data": {
    "period_summary": {
      "period": "month",
      "start_date": "2024-11-03",
      "end_date": "2024-12-03",
      "jobs_created": 25,
      "applications_submitted": 150
    },
    "trends": {
      "job_publication": [
        {"date": "2024-11-03", "count": 2},
        {"date": "2024-11-04", "count": 1}
      ],
      "job_applications": [...]
    },
    "distributions": {
      "salary": [
        {"range": "3000-5000", "count": 20},
        {"range": "5000-8000", "count": 35}
      ],
      "location": [...],
      "education": [...]
    },
    "success_rates": {
      "by_job_type": [...]
    }
  }
}`

// 跳转到统计页面
const goToStatistics = () => {
  router.push('/jobs/statistics')
  ElMessage.success('正在跳转到岗位统计页面')
}

// 跳转到测试页面
const goToTest = () => {
  router.push('/jobs/statistics-test')
  ElMessage.success('正在跳转到API测试页面')
}

// 刷新演示
const refreshDemo = () => {
  ElMessage.success('演示页面已刷新')
}
</script>

<style lang="scss" scoped>
.job-statistics-demo {
  .demo-header {
    text-align: center;
    
    h2 {
      margin: 0 0 8px 0;
      color: var(--el-text-color-primary);
    }
    
    p {
      margin: 0;
      color: var(--el-text-color-secondary);
    }
  }
  
  .demo-content {
    .feature-card {
      text-align: center;
      height: 280px;
      
      .feature-icon {
        margin-bottom: 16px;
      }
      
      h3 {
        margin: 0 0 12px 0;
        color: var(--el-text-color-primary);
      }
      
      p {
        margin: 0 0 16px 0;
        color: var(--el-text-color-secondary);
        font-size: 14px;
      }
      
      ul {
        text-align: left;
        margin: 0;
        padding-left: 20px;
        
        li {
          margin: 4px 0;
          font-size: 13px;
          color: var(--el-text-color-regular);
        }
      }
    }
    
    .api-demo {
      h4 {
        margin: 0 0 16px 0;
        
        code {
          background: var(--el-fill-color-light);
          padding: 4px 8px;
          border-radius: 4px;
          font-family: 'Monaco', 'Consolas', monospace;
        }
      }
      
      .json-preview {
        background: var(--el-fill-color-light);
        padding: 16px;
        border-radius: 6px;
        font-size: 12px;
        line-height: 1.5;
        max-height: 400px;
        overflow-y: auto;
        font-family: 'Monaco', 'Consolas', monospace;
      }
    }
    
    .charts-demo {
      h4 {
        margin: 0 0 16px 0;
        color: var(--el-text-color-primary);
      }
      
      .chart-type-card {
        text-align: center;
        height: 140px;
        
        .chart-icon {
          margin-bottom: 8px;
        }
        
        h5 {
          margin: 0 0 8px 0;
          color: var(--el-text-color-primary);
        }
        
        p {
          margin: 0;
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }
      }
    }
    
    .demo-actions {
      text-align: center;
      
      .el-button {
        margin: 0 8px;
      }
    }
  }
}
</style>
